<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="down_page">
    <!---------------------------|导航树 -->
    <div class="down_page_left">
      <NAnchor style="z-index: 1">
        <NAnchorLink title="名称" href="#anchorName" style="margin-top: 5px" />
        <NAnchorLink title="尺寸" href="#anchorSize" style="margin-top: 5px" />
      </NAnchor>
    </div>
    <!---------------------------|工具按钮 -->
    <div class="down_page_tool">
      <div style="width: 5px"></div>
      <div class="h_flex_column_around">
        <!-- 新建页面 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
              viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataNewIcon')" @click="onCreateNewPage()"></svg>
          </template>
          <span>新建页面</span>
        </NTooltip>
        <!-- 复制参数 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
              viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataCopyIcon')" @click="onCopyPageCanvasInfo()"></svg>
          </template>
          <span>复制页面参数</span>
        </NTooltip>
        <!-- 粘贴参数 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
              viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('pasteIcon')" @click="onPastePageCanvasInfo()"></svg>
          </template>
          <span>粘贴页面参数</span>
        </NTooltip>
      </div>
      <div style="width: 20px"></div>
    </div>
    <!---------------------------|属性 -->
    <div class="down_page_right">
      <!---------------------------|名称 -->
      <div id="anchorName" class="anchor_link">
        <!-- 页面名称 -->
        <div class="h_info">
          <text class="h_info_lable">页面名称:</text>
          <NInput type="text" class="h_info_val" v-model:value="canvasStore.canvasAttr.pageName" />
        </div>
        <!-- 页面尺寸 -->
        <div class="h_info">
          <text class="h_info_lable">页面尺寸:</text>
          <NSelect class="h_info_val" v-model:value="canvasStore.canvasAttr.pageSize" :options="pageSizeOpt" />
        </div>
        <!-- 页面方向 -->
        <div class="h_info" v-if="pageSize !== 'custom'">
          <text class="h_info_lable">页面方向:</text>
          <NSelect class="h_info_val" v-model:value="canvasStore.canvasAttr.pageOrientation"
            :options="pageOrientationOpt" />
        </div>
        <!-- 页面精度 -->
        <div class="h_info">
          <text class="h_info_lable">页面精度:</text>
          <NSelect class="h_info_val" v-model:value="canvasStore.canvasAttr.pageAccuracy" :options="pageAccuracyOpt" />
        </div>
        <!-- 页面ID -->
        <div class="h_info">
          <text class="h_info_lable">页面ID:</text>
          <text class="h_info_val">{{ canvasStore.canvasAttr.pageKey }}</text>
        </div>
      </div>

      <!---------------------------|尺寸 -->
      <n-divider />
      <div id="anchorSize" class="anchor_link">
        <!-- 页面宽度 -->
        <div class="h_info" v-if="pageSize === 'custom'">
          <text class="h_info_lable">页面宽度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider class="h_margin_top_10" v-model:value="canvasStore.canvasAttr.canvasWidth" />
            <NInputNumber class="h_margin_top_10" v-model:value="canvasStore.canvasAttr.canvasWidth" />
          </div>
        </div>
        <div class="h_info" v-if="pageSize !== 'custom'">
          <text class="h_info_lable">页面宽度:</text>
          <text class="h_info_val">{{ canvasStore.canvasAttr.canvasWidth }}</text>
        </div>
        <!-- 页面高度 -->
        <div class="h_info" v-if="pageSize === 'custom'">
          <text class="h_info_lable">页面高度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider class="h_margin_top_10" v-model:value="canvasStore.canvasAttr.canvasHeight" />
            <NInputNumber class="h_margin_top_10" v-model:value="canvasStore.canvasAttr.canvasHeight" />
          </div>
        </div>
        <div class="h_info" v-if="pageSize !== 'custom'">
          <text class="h_info_lable">页面高度:</text>
          <text class="h_info_val">{{ canvasStore.canvasAttr.canvasHeight }}</text>
        </div>
        <!-- 页面单位 -->
        <div class="h_info">
          <text class="h_info_lable">页面单位:</text>
          <text class="h_info_val">{{ canvasStore.canvasAttr.pageUnit }}</text>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetDataManagerIcon,
  onCreateNewPage,      // 创建新页面
  onCopyPageCanvasInfo, // 复制_画布参数
  onPastePageCanvasInfo,// 粘贴_画布参数
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useProjectStore } from "@/store/projectStore"; // 工程
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useStaticStore } from "@/store/staticStore"; // 静态

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const projectStore = useProjectStore(); // 工程
const canvasStore = useCanvasStore(); // 画布
const staticStore = useStaticStore(); // 静态

/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
let pageSize = computed(() => canvasStore.canvasAttr.pageSize);
/** 图标尺寸 */
const IconSize = 36;
// ——————————————————————————————————————————————————————————————————————————| 选项
/** 页面尺寸选项 */
const pageSizeOpt = staticStore.pageSizeOpt;
/** 页面方向选项  */
const pageOrientationOpt = staticStore.pageOrientationOpt;
/** 页面精度选项  */
const pageAccuracyOpt = staticStore.pageAccuracyOpt;

</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
// 容器
.down_page {
  width: 100%;
  max-height: 250px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  background-color: rgb(80,80,80);
  overflow: hidden;
  user-select: none;

  // 容器-左边导航
  .down_page_left {
    max-height: 250px;
    width: 300px;
    margin-left: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgb(197, 197, 197);
    }
  }

  // 容器-左边参数
  .down_page_right {
    max-height: 250px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgb(197, 197, 197);
    }
  }
}

//工具
.down_page_tool {
  margin: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.anchor_link {
  margin: 0px;
  display: flex;
  flex-direction: column;

  width: 100%;
}

/* 参数 */
.h_info {
  padding: 5px;
  width: 100%;
  user-select: none;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

/* 参数标题 */
.h_info_lable {
  padding-left: 3px;
  width: 150px;
}

/* 参数变量 */
.h_info_val {
  width: 100%;
  margin-right: 16px;
}
</style>
